import React, { useState, useEffect } from 'react';
// import { Form, Row, Col, Input, Button, DatePicker } from 'antd';
import { connect } from 'dva';
import { useAntdTable } from '@umijs/hooks';

import SlickTable from '@/components/SlickTable';
import { getPageSizeByCardHeight } from '@/utils/utils';
import request from '@/utils/request';
import QueryConndition from './QueryCondition';

function Done({ size: { height }, goToStep }) {
  const [size, setSize] = useState(getPageSizeByCardHeight(height - 64 - 8));
  const [paramsObj, setParamsObj] = useState({});

  const getTableData = ({ current, pageSize, paramsObj }) => {
    return request('pmc/pms/PmOrderWorkController/queryPage', {
      data: {
        queryType: 'processed',
        pageNum: current,
        pageSize: pageSize,
        sortName: '',
        // sortOrder: 'asc',
        ...paramsObj,
      },
    }).then(res => {
      if (Array.isArray(res.data && res.data.records)) {
        return {
          total: res.data.total,
          data: res.data.records.map(val => {
            const { children, ...rest } = val;
            return rest;
          }),
        };
      }
      return {
        total: 0,
        data: [],
      };
    });
  };

  const { tableProps, refresh } = useAntdTable(
    params => {
      return getTableData({ ...params, pageSize: size, paramsObj });
    },
    [paramsObj, height],
    {
      defaultPageSize: size,
    }
  );

  const { pagination, ...restTableProps } = tableProps;

  useEffect(() => {
    setSize(getPageSizeByCardHeight(height - 64 - 8));
  }, [height]);

  const submit = value => {
    setParamsObj({
      ...value,
    });
    // form.validateFields((err, fieldsValue) => {
    //   if (err) return;
    //   // console.log(fieldsValue);
    //   setParamsObj({
    //     ...fieldsValue,
    //   });
    // });
  };

  const columns = [
    {
      title: '流程实例标识',
      dataIndex: 'flowInstId',
      ellipsis: true,
    },
    {
      title: '工单名称',
      dataIndex: 'orderName',
      ellipsis: true,
    },
    {
      title: '工单编码',
      dataIndex: 'orderNumber',
      width: 160,
      ellipsis: true,
    },
    {
      title: '流程名称',
      dataIndex: 'flowName',
      ellipsis: true,
    },
    {
      title: '流程类型',
      dataIndex: 'flowDefName',
      ellipsis: true,
    },
    {
      title: '发起时间',
      dataIndex: 'createDateStr',
      width: 150,
      align: 'center',
    },
    {
      title: '发起人',
      dataIndex: 'createName',
      width: 100,
      align: 'center',
    },
    {
      title: '当前环节',
      dataIndex: 'flowNodeName',
      ellipsis: true,
    },
    {
      title: '当前处理人',
      dataIndex: 'dealName',
      width: 100,
      align: 'center',
    },

    {
      title: '操作',
      width: 100,
      align: 'center',
      render: (text, record) => {
        return (
          <span>
            <a
              onClick={() => {
                goToStep(2, { record, mode: 'readOnly' });
              }}
            >
              详情
            </a>
          </span>
        );
      },
    },
  ];

  return (
    <>
      <QueryConndition query={submit} />
      <SlickTable
        style={{ marginTop: 8 }}
        rowKey={record => record.mainId}
        columns={columns}
        {...restTableProps}
        data={{
          pagination: {
            ...pagination,
            pageSize: size,
          },
        }}
      />
    </>
  );
}

export default connect(({ setting }) => ({
  size: setting.size,
}))(Done);
